<script setup>
import {debounceRef} from './assets/js/debounceRef.js'

const value = debounceRef('', 1000)
</script>

<template>
  <div class="container">
    <div v-slide-in v-for="n in 10" class="item">{{ n }}</div>
  </div>
  <div>
    <input v-model="value"></input>
  </div>
</template>

<style scoped>
.container {
  width: 80%;
  margin: 1em auto;
  padding: 0;
  height: 60vh;
  overflow: auto;
}

.item {
  width: 100%;
  aspect-ratio: 2/1;
  margin: 5vw 0;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  font-size: 10vw;
  color: white;
}
</style>
